<template>
  <XLayoutMain class="creative-create-form" ref="layoutMainRef">
    <div>
      <div style="width: 750px;margin: 0 auto">
        <BaseInfo  :index="1"></BaseInfo>
        <CreativeWay  :index="2"/>
        <CreativeContent ref="creativeContentRef"  :index="3"/>
        <MarkComponent ref="markComponentRef"  :index="4"></MarkComponent>
        <LoadPage ref='loadPageRef'  :index="5"></LoadPage>
      </div>

    </div>
    <template #footer>
      <n-space justify="center">
        <x-button :loading="saveLoading" type="default" @click="handleBack">返回</x-button>
        <x-button :loading="saveLoading" type="primary" @click="handleSave">保存</x-button>
      </n-space>
    </template>
  </XLayoutMain>
</template>
<script setup lang="ts">
import { XLayoutMain, XButton } from '@/components'
import { useStore } from '@/store'
import { onBeforeRouteLeave, useRoute, useRouter } from 'vue-router'
import {
  Step3,
  Step5,
  AccountSelect,
  MarketContent,
  CreativeWay,
  AdvPosition,
  CreativeContent,
  MarkComponent
} from '../../ads/create/components';
import LoadPage from '../../ads/create/components/load-page.vue';
import BaseInfo from './components/base-info.vue';
import { computed, nextTick, onMounted, provide, ref, onBeforeMount } from 'vue'
import { NGrid, NGi, NSpace, useMessage } from 'naive-ui'
import { createCreateGroupBody } from '@/store/modules/adv/helper';
import { addCreative } from '@/api/intelligent'
const saveLoading = ref();




function handleBack() {
  router.back()
}

const message = useMessage();
const router = useRouter()
const route = useRoute()
const store = useStore()
const adv = computed(() => store.state.adv.modal);
const creativeContentRef = ref();
const markComponentRef = ref();
const loadPageRef = ref();

async function handleSave() {

  await creativeContentRef.value.validate();
  await markComponentRef.value.validate();
  if(loadPageRef.value) {
    await loadPageRef.value.validate();
  }
  const v = createCreateGroupBody(store.state.adv);
  const creativeList = v[0].creativeArrayList[0].creativeList;

  const params = {
    accountCode: v[0].accountCode,
    outAdgroupId: adv.value.adgroupId,
    creativeVoList: creativeList.map((creative: any) => {
      return {
        creativeName: creative.creativeName,
        creativeComponents: creative.creativeComponents,
        deliveryMode: creative.deliveryMode,
        creativeTemplateId: creative.creativeTemplateId,
        pageType: creative.pageType
      }
    })
  };

  try {
    saveLoading.value = true;
    await addCreative(params);
    message.success('创意创建成功！');
    saveLoading.value = false;
    router.back();
    // router.push({
    //   name: 'Draft',
    //   query: {
    //     // batchId: advBody.batchId
    //   }
    // });
  } finally {
    saveLoading.value = false;
  }

}

onBeforeMount(async () => {
  // 如果存在广告id，
  getAdv(route.query)

})

async function getAdv(query: any) {
  // 获取广告详情
  await store.dispatch('adv/getAdvCreativeInfo', {
    adgroupId: query.adgroupId,
    accountCode: query.accountCode
  });
  store.commit('adv/CONFIG_AUTH', {
    adv: {
      'mode': 'CREATE_CREATIVE'
    },
    account: {
      operation: false,
    }
  })




  // 注册页面权限
  // 模块回显

}


</script>
